<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
  --color-list: rgb(30, 30, 30) rgb(60, 60, 60);
}
.target {
  --color-list: rgb(40, 40, 40) rgb(80, 80, 80);
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
CSS.registerProperty({
  name: '--color-list',
  syntax: '<color>+',
  initialValue: 'red blue',
  inherits: false,
});

assertInterpolation({
  property: '--color-list',
  from: 'initial',
  to: 'blue red',
}, [
  {at: -0.3, is: 'rgb(255, 0, 0) rgb(0, 0, 255)'},
  {at: 0, is: 'rgb(255, 0, 0) rgb(0, 0, 255)'},
  {at: 0.5, is: 'rgb(128, 0, 128) rgb(128, 0, 128)'},
  {at: 1, is: 'rgb(0, 0, 255) rgb(255, 0, 0)'},
  {at: 1.5, is: 'rgb(0, 0, 255) rgb(255, 0, 0)'},
]);

assertInterpolation({
  property: '--color-list',
  from: 'inherit',
  to: 'rgb(80, 80, 80) rgb(0, 0, 0)',
}, [
  {at: -0.3, is: 'rgb(15, 15, 15) rgb(78, 78, 78)'},
  {at: 0, is: 'rgb(30, 30, 30) rgb(60, 60, 60)'},
  {at: 0.5, is: 'rgb(55, 55, 55) rgb(30, 30, 30)'},
  {at: 1, is: 'rgb(80, 80, 80) rgb(0, 0, 0)'},
  {at: 1.5, is: 'rgb(105, 105, 105) rgb(0, 0, 0)'},
]);

assertInterpolation({
  property: '--color-list',
  from: 'unset',
  to: 'tan tomato',
}, [
  {at: -0.3, is: 'rgb(255, 0, 0) rgb(0, 0, 255)'},
  {at: 0, is: 'rgb(255, 0, 0) rgb(0, 0, 255)'},
  {at: 0.5, is: 'rgb(233, 90, 70) rgb(128, 50, 163)'},
  {at: 1, is: 'rgb(210, 180, 140) rgb(255, 99, 71)'},
  {at: 1.5, is: 'rgb(188, 255, 210) rgb(255, 149, 0)'},
]);

assertInterpolation({
  property: '--color-list',
  from: 'hsl(120, 100%, 50%) coral',
  to: 'navy hsl(240, 100%, 50%)',
}, [
  {at: -0.3, is: 'rgb(0, 255, 0) rgb(255, 165, 28)'},
  {at: 0, is: 'rgb(0, 255, 0) rgb(255, 127, 80)'},
  {at: 0.5, is: 'rgb(0, 128, 64) rgb(128, 64, 168)'},
  {at: 1, is: 'rgb(0, 0, 128) rgb(0, 0, 255)'},
  {at: 1.5, is: 'rgb(0, 0, 192) rgb(0, 0, 255)'}
]);

assertInterpolation({
  property: '--color-list',
  from: neutralKeyframe,
  to: 'rgb(0, 40, 40) black',
}, [
  {at: -0.3, is: 'rgb(52, 40, 40) rgb(104, 104, 104)'},
  {at: 0, is: 'rgb(40, 40, 40) rgb(80, 80, 80)'},
  {at: 0.5, is: 'rgb(20, 40, 40) rgb(40, 40, 40)'},
  {at: 1, is: 'rgb(0, 40, 40) rgb(0, 0, 0)'},
  {at: 1.5, is: 'rgb(0, 40, 40) rgb(0, 0, 0)'},
]);

assertComposition({
  property: '--color-list',
  underlying: 'darkslategray rgb(10, 10, 10)',
  addFrom: 'rgb(10, 10, 10) navy',
  addTo: 'rgb(30, 30, 30) teal',
}, [
  {at: -0.3, is: 'rgb(51, 83, 83) rgb(10, 0, 138)'},
  {at: 0, is: 'rgb(57, 89, 89) rgb(10, 10, 138)'},
  {at: 0.5, is: 'rgb(67, 99, 99) rgb(10, 74, 138)'},
  {at: 1, is: 'rgb(77, 109, 109) rgb(10, 138, 138)'},
  {at: 1.5, is: 'rgb(87, 119, 119) rgb(10, 202, 138)'},
]);

assertComposition({
  property: '--color-list',
  underlying: 'gold rgb(100, 100, 100)',
  addFrom: 'navy rgb(0, 0, 0)',
  replaceTo: 'rgb(17, 17, 17) rgb(1, 1, 1)',
}, [
  {at: -0.3, is: 'rgb(255, 255, 161) rgb(130, 130, 130)'},
  {at: 0, is: 'rgb(255, 215, 128) rgb(100, 100, 100)'},
  {at: 0.5, is: 'rgb(136, 116, 73) rgb(51, 51, 51)'},
  {at: 1, is: 'rgb(17, 17, 17) rgb(1, 1, 1)'},
  {at: 1.5, is: 'rgb(0, 0, 0) rgb(0, 0, 0)'},
]);

</script>
</body>
